<template>
  <div>
    <div id="container"  v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(f, f, f, 0.8)"></div>
    <div id="panel"></div>
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      lng:0,
      lat:0,
    };
  },
  created() {
        this.getLocation();
    },
  mounted() {
    setTimeout(() => {
      this.initMap_();
      this.loading = false;
    }, 2000);
  },
  methods: {
      getLocation() {
            //获取当前位置
            navigator.geolocation.getCurrentPosition((res)=>{
                this.lat = res.coords.latitude;
                this.lng = res.coords.longitude;
                //res.coords.latitude
            }, (err)=>{
                console.log(err);
            }, {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            });
        },
    initMap_() {
      var map = new AMap.Map("container", {
        center: [109.4466, 24.3306],
        zoom: 14,
      });
      var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        province: "京", // 车牌省份的汉字缩写
        map: map,
        panel: 'panel'
      };
      var driving = new AMap.Driving(drivingOption);
    //   console.log(this.$route.query.one, this.$route.query.two),
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          new AMap.LngLat(this.lng, this.lat),
          new AMap.LngLat(this.$route.query.one, this.$route.query.two),
          function (status, result) {
            // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              if (result.routes && result.routes.length) {
                // 绘制第一条路线，也可以按需求绘制其它几条路线
                drawRoute(result.routes[0]);
                log.success('距离目的地大约'+result.routes[0].distance/1000+'km');
                // alert('距离目的地大约'+result.routes[0].distance/1000+'km');
              }
            } else {
              console.log(result);
              log.error("获取驾车数据失败：" + result);
            }
          }
        );
      function drawRoute(route) {
        var path = parseRouteToPath(route);

        var startMarker = new AMap.Marker({
          position: path[0],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
          map: map,
        });
        var endMarker = new AMap.Marker({
          position: path[path.length - 1],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
          map: map,
        });

        var routeLine = new AMap.Polyline({
          path: path,
          isOutline: true,
          outlineColor: "#ffeeee",
          borderWeight: 2,
          strokeWeight: 5,
          strokeColor: "#0091ff",
          lineJoin: "round",
        });
        routeLine.setMap(map);
        // 调整视野达到最佳显示区域
        map.setFitView([startMarker, endMarker, routeLine]);
      }
      function parseRouteToPath(route) {
        var path = [];

        for (var i = 0, l = route.steps.length; i < l; i++) {
          var step = route.steps[i];

          for (var j = 0, n = step.path.length; j < n; j++) {
            path.push(step.path[j]);
          }
        }
        return path;
      }
    },
  },
};
</script>

<style scoped>
#container {
        width: 998px;
        height: 625px;
        border-radius: 10px;
    }
    #panel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 50px;
        right: 10px;
        width: 280px;
        border-radius: 4px;
    }
    #panel .amap-call {
        background-color: #009cf9;
        border-top-left-radius: 4px;
   	    border-top-right-radius: 4px;
    }
    #panel .amap-lib-driving {
	    border-bottom-left-radius: 4px;
   	    border-bottom-right-radius: 4px;
        overflow: hidden;
    }
</style>